<template>
    <div pr>
        <div class="mycar1">
            <h1 class="f30 pr">
                <router-link class="pa cfff" to="/mine" tag="span" style="left:20rem;">
                    <i class="el-icon-arrow-left f40 "></i>
                </router-link>
                我的车辆
            </h1>
            <!--没有车辆信息 -->
            <div class="tc" v-if="isShowCar">
                <img class="img" src="../../../assets/img/myCar-Coupon/group4.png">
                <p class="f12 f30" style="color: gray;">暂无车辆信息</p>
            </div>
        </div>
        <main>
            <section class="bcfff f20 mb20" v-for="(el, index) in arr" :key="index">
                <div class="p10">
                    <div class="flex  pb30" style="border-bottom: 2rem solid #eee;">
                        <img :src="el.images" class="car mr30">
                        <div class="aic">
                            <h2 class="f30 mb30">车型:{{ el.carType }}</h2>
                            <p class="f25">车牌:{{ el.carBrand }}</p>
                        </div>
                    </div>
                    <div class="control flex mt30 jcsb f25">
                        <p>
                            <img src="../../../assets/img/wash-car-img/circle.png">
                            <!-- <img src="../../../assets/img/wash-car-img/right-red.png"> -->
                            设为默认车辆
                        </p>
                        <span @click="onDel(el.id, index)">删除</span>
                    </div>
                </div>
            </section>
        </main>
        <!-- <div class="flex fdc pf aic jcc p50 bs f25 deleteCar" v-if="isLook">
            <p>车牌：{{ }} 确认删除该车辆吗?</p>
            <div class="btn">
                <button @click="isLook = false">取消</button>
                <button @click="fun">确认</button>
            </div>
        </div> -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="80%">
            <span>确定删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onConfirm()">确 定</el-button>
            </span>
        </el-dialog>
        <header class="mask" v-if="isLook"></header>
        <ul class="footer  bcff bs  tc pf w100 jcsb f20">
            <li>
                <a href="#" class="pay-order f25 cfff " @click="toAddCar">
                    <img class="add" src="../../../assets/img/wash-car-img/add.png"> 添加车辆
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
import { myCar } from '@/api/myCard';
import { deleteCar } from '@/api/myCard';
export default {
    mounted() {
        this.init();
    },
    methods: {
        init() {
            myCar({
                uid: 1
            }).then(r => {
                if (r.data.length < 0) {//假如没有车辆信息，展示无车辆信息页面
                    this.isShowCar = true;
                } else {
                    this.arr = r.data;
                }
            })
        },
        toAddCar() {
            this.$router.push('addCar');
        },
        onDel(id, index) {
            this.dialogVisible = true;
            // this.onConfirm(id);
            this.id = id;
        },
        onConfirm(id){
            deleteCar({
                id: this.id
            }).then(r => {
                this.init();
            })
            this.dialogVisible = false;
        }
    },
    data() {
        return {
            id:"",
            dialogVisible:false,
            isShowCar: false,
            isLook: false,
            arr: []
        }
    }
}
</script>
<style scoped>
.deleteCar button {
    padding: 20rem;
}

.deleteCar {
    border-radius: 15rem;
    height: 150rem;
    width: 93%;
    top: 50%;
    left: 25rem;
    background-color: white;
    margin: auto;
    z-index: 2;
}

.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, .5);
}

main {
    margin-top: -250rem;
    margin-bottom: 150rem;
}

section {
    padding: 40rem 30rem;
    border-radius: 20rem;
    box-sizing: border-box;
    margin: 0 20rem;
}

section img.car {
    width: 110rem;
    height: 110rem;
    border-radius: 50%;
}

section .control img {
    width: 25rem;
    height: 25rem;
}

.mycar1 {
    background-color: #3385fc;
    height: 354rem;
}

h1 {
    display: flex;
    font-weight: 370;
    color: white;
    width: 100%;
    height: 115rem;
    align-items: center;
    justify-content: center;
}

h1+div {
    background-color: white;
    width: 92%;
    margin: 15rem auto;
    border-radius: 15rem;
    height: 700rem;
}

img.img {
    margin: 158rem auto -45rem;
    width: 460rem;
    height: 321rem;
}

ul.footer {
    height: 115rem;
    left: 0;
    bottom: 0;
    padding: 0 20rem;
    background-color: #fff;
    line-height: 115rem;
}

ul.footer a.pay-order {
    background-color: #1e72f0;
    padding: 20rem 255rem;
    border-radius: 50rem;
}

ul.footer a.pay-order img.add {
    width: 23rem;
    height: auto;
    vertical-align: middle;
    margin-top: -2rem;
}
</style>